I've worked on this page numerous times while working at Springs Window Fashions. This iteration is by far the best and most robust. For this project, I collaborated with our UX designer to develop a page that delivered a better messaging strategy for explaining what motorization is and why you should by it. This is built within Episerver which is a .NET MVC framework in Visual Studio.
Two sections of the page were my favorite to work on. These required building in interactivity rather than just static content.
New Product Flip Cards
This section was a bit trick to manage, but I was able to build this with grid and flex box. All of the cards have to be the same height which ended up being determined by the back sides of the cards. Positioning all of the images was tedious, but I like some of the effects that happen when the squares get a bit smaller with screen size.
Product Solutions Grid Gallery
My favorite part of the page: the modal grid gallery. I did a few cool things with this: first off, I created a bunch of utility classes that can be applied to grid items. based on those classes, you can manipulate the dimensions on the grid. Additionally, I wrote some javascript to animate in each modal on click and then hooked it up to animate close on 'esc' or the two back buttons. This was a cool challenge in working with grid more and really diving into positioning and density.
